<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../styles/prod.scss";
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class="pds-tip">
      <div class="title">
        唛头/序列号发放
      </div>
    </div>
    <!-- 列表 -->
    <el-button class="filter-item pds-success" type="success" @click="dialogFormVisible = true">新增唛头/序列号</el-button>
    <el-col :span="6" style='  float: right;margin-bottom:20px;'>
      <div class="filter-container" style="float:right">
        <el-input style="width: 200px;" class="filter-item" placeholder="请输入批次号" v-model="pageData.params.key">
        </el-input>
        <el-button class="filter-item" type="primary" icon="search" @click="search()">查询</el-button>
      </div>
    </el-col>
    <el-table :data="tableData" border style="margin: 15px auto;">
      <el-table-column fixed type="index" align="center" label="序号" width="50"></el-table-column>
      <el-table-column prop="modelcode" label="客户" align="center" width="130px"></el-table-column>
      <el-table-column prop="category" label="批次号" align="center" width="100px"></el-table-column>
      <el-table-column prop="modelnub" label="订单号" align="center"></el-table-column>
      <el-table-column prop="modelname" label="机型全码" align="center"></el-table-column>
      <el-table-column prop="customer" label="客户型号" align="center" width="100px"></el-table-column>
      <el-table-column prop="totalcost" label="流水码" align="center" width="180px"></el-table-column>
      <el-table-column prop="queryTime" label="数量" align="center" width="100px"></el-table-column>
      <el-table-column prop="queryTime" label="业务员" align="center" width="100px"></el-table-column>
      <el-table-column prop="queryTime" label="日期" align="center" width="100px"></el-table-column>
      <el-table-column width="" align="center" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">草稿</span>
          <span v-if="scope.row.status==1">审核中</span>
          <span v-if="scope.row.status==2">已发布</span>
          <span v-if="scope.row.status==3">已删除</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="165px" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="dialogFormVisible = true">编辑</el-button>
          <el-button type="primary" size="mini">发放</el-button>
        </template>
        <pagination :pageData="pageData.params" @pageChange="changePage" @changeSize="changeSize"></pagination>
      </el-table-column>
    </el-table>
    <el-dialog title="新增唛头/序列号" :visible.sync="dialogFormVisible" width="65%" :before-close="handleClose">
      <el-form ref="form" label-width="80px">
        <div style='width:95%;'>
          <el-form-item>
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple">

                  <el-form-item label="客户:">
                    <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="批次号:">
                    <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="订单号:">
                    <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="机型全码:">
                    <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="客户型号:">
                    <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="生成数量:">
                    <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-col :span='24'>
              <div class="grid-content bg-purple">
                <el-form-item label="生成数量:">
                  <el-input type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-form-item>
        </div>
        <el-col :span="24">
          <el-button class="filter-item pds-success" type="success">新增唛头/序列号</el-button>
          <div style='margin-top:20px;'>
            <div class="pds-tip-green">
              <p>
                文档列表
              </p>
            </div>
          </div>
          <div style='margin-bottom:20px;'>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="序号" align='center' width="130">
                <template slot-scope="scope">
                  {{scope.$index + pageData.start}}
                </template>
              </el-table-column>
              <el-table-column prop="name" align='center' label="姓名" width="300">
              </el-table-column>
              <el-table-column prop="address" align='center' label="地址">
              </el-table-column>
              <el-table-column width='200px;' align='center' label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <el-form-item>
          <div style='float:right;'>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from '@/api/packing/serial/index';
  export default {
    data() {
      return {
        searchContent: '',
        pageData: {
          params: {
            page: 1,
            limit: 10,
            total: 100
          },
          list: []
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        const params = Object.assign({}, this.pageData.params);
        delete params.total;
        api.getList(params).then(response => {
          if (response.code === 200) {
            this.pageData.list = response.data.rows;
            this.pageData.params.total = response.data.total;
          }
        });
      },
      search() {
        this.pageData.params.page = 1
        this.getList()
      },
      changePage(pageData) {
        this.pageData.params.page = pageData.page;
        this.getList();
      },
      changeSize(pageSize) {
        this.pageData.params.limit = pageSize;
        this.pageData.params.page = 1;
        this.getList();
      },
      edit() {
        console.log(222222222222)
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }

    }
  }

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .titletop {
    width: 100%;
    height: 50px;
    background: #EEF1F6;
    border-left: 4px solid #009688;
    line-height: 50px;
    margin-bottom: 15px;

    span {
      margin-left: 10px;
    }
  }

  .Costget {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;

    .search_sou {
      width: 70%;
    }
  }

</style>
